<template>
  <div>
    <h1>Music</h1>
    <ul>
        <li v-for='item,index in list' :key='index'>{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
    name:'Music',
    mounted() {
        console.log(this.$route.params)
    },
    // params 3.动态路由的params传值的动态参数,在$route.params对象上
    computed:{
        list(){
            switch(this.$route.params.id){
                case '1':
                    return ['huayu1','huayu2','huayu3'];
                case '2':
                    return ['yueyu1','yueyu2','yueyu3'];
                case '3':
                    return ['yingyu1','yingyu2','yingyu3'];
                default:
                    return []
            }
        }
    }
}
</script>

<style>

</style>